<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function move(fromId,toId){
            var fromObj=document.getElementById(fromId);
            var toObj=document.getElementById(toId);

            // for (var i = 0; i < fromObj.options.length; i++) {
            //     var currOption=fromObj.options[i];
            //     if(currOption.selected){
            //         var text=currOption.text;
            //         var value=currOption.value;
            //
            //         var option=new Option(text,value);
            //         toObj.options[toObj.options.length]=option;
            //         fromObj.options[i]=null;
            //         i--;
            //     }
            // }


            // for (var i = fromObj.options.length-1; i >=0 ; i--) {
            //     var currOption=fromObj.options[i];
            //     if(currOption.selected){
            //         var text=currOption.text;
            //         var value=currOption.value;
            //
            //         var option=new Option(text,value);
            //         toObj.options[toObj.options.length]=option;
            //         fromObj.options[i]=null;
            //     }
            // }


            for (var i = fromObj.options.length-1; i >=0 ; i--) {
                var currOption=fromObj.options[i];
                if(currOption.selected){
                    toObj[toObj.options.length]=currOption;
                }
            }
        }

        function moveAll(fromId,toId){
            var fromObj=document.getElementById(fromId);
            var toObj=document.getElementById(toId);

            for (var i = fromObj.options.length-1; i >=0 ; i--) {
                var currOption=fromObj.options[i];
                toObj[toObj.options.length]=currOption;
            }
        }



        function move2(fromId,toId){
            var fromObj=document.getElementById(fromId);
            var toObj=document.getElementById(toId);

            for (var i = 0; i < fromObj.options.length; i++) {
                var currOption=fromObj.options[i];
                if(currOption.selected){
                    currOption.style.color="#dddddd";
                    toObj.options[i].style.color="#000000";
                    currOption.selected=false;
                }
            }
        }

        function moveAll2(fromId,toId){
            var fromObj=document.getElementById(fromId);
            var toObj=document.getElementById(toId);

            for (var i = 0; i < fromObj.options.length; i++) {
                var currOption=fromObj.options[i];
                currOption.style.color="#dddddd";
                toObj.options[i].style.color="#000000";
                currOption.selected=false;
            }
        }


        function beforeSubmit(){
            var obj=document.getElementById("s2");

            for (currOption of obj.options) {
                currOption.selected="selected";
            }
        }

        function beforeSubmit2(){
            var obj=document.getElementById("s4");

            for (var currOption of obj.options) {
                if(currOption.style.color=="rgb(0, 0, 0)"){
                    currOption.selected="selected";
                }
            }
        }

    </script>

</head>
<body>
    <form action="#" onsubmit="beforeSubmit();">
        <table style="background-color: #00ffff;padding: 10px">
            <tr>
                <td>
                    <select id="s1" multiple="multiple" style="width: 150px;height: 200px;">
                        <option value="1">aaa</option>
                        <option value="2">bbb</option>
                        <option value="3">ccc</option>
                        <option value="4">ddd</option>
                    </select>
                </td>

                <td>
                    <input type="button" value="--&gt;" style="width: 40px;" onclick="move('s1','s2');"/><br/>
                    <input type="button" value="&lt;--" style="width: 40px;" onclick="move('s2','s1');"/><br/>
                    <input type="button" value="--&gt;&gt;" style="width: 40px;" onclick="moveAll('s1','s2');"/><br/>
                    <input type="button" value="&lt;&lt;--" style="width: 40px;" onclick="moveAll('s2','s1');"/><br/>
                </td>


                <td>
                    <select id="s2" name="s2" multiple="multiple" style="width: 150px;height: 200px;">
                    </select>
                </td>
            </tr>
        </table>
        <input type="submit" value="提交"/>
    </form>

    <hr/>



    <form action="#" onsubmit="beforeSubmit2();">
        <table style="background-color: #00ffff;padding: 10px">
            <tr>
                <td>
                    <select id="s3" multiple="multiple" style="width: 150px;height: 200px;">
                        <option value="1" style="color: #000000">aaa</option>
                        <option value="2" style="color: #000000">bbb</option>
                        <option value="3" style="color: #000000">ccc</option>
                        <option value="4" style="color: #000000">ddd</option>
                    </select>
                </td>

                <td>
                    <input type="button" value="--&gt;" style="width: 40px;" onclick="move2('s3','s4');"/><br/>
                    <input type="button" value="&lt;--" style="width: 40px;" onclick="move2('s4','s3');"/><br/>
                    <input type="button" value="--&gt;&gt;" style="width: 40px;" onclick="moveAll2('s3','s4');"/><br/>
                    <input type="button" value="&lt;&lt;--" style="width: 40px;" onclick="moveAll2('s4','s3');"/><br/>
                </td>


                <td>
                    <select id="s4" name="s4" multiple="multiple" style="width: 150px;height: 200px;">
                        <option value="1" style="color: #dddddd">aaa</option>
                        <option value="2" style="color: #dddddd">bbb</option>
                        <option value="3" style="color: #dddddd">ccc</option>
                        <option value="4" style="color: #dddddd">ddd</option>
                    </select>
                </td>
            </tr>
        </table>
        <input type="submit" value="提交"/>
    </form>
















</body>
</html>